<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="icon"
	href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代码  */
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
<script
	src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script
	src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

</head>
<body>
	<div id="container"
		style="height: 800px; width: 1000px; margin: auto; min-width: 1000px; max-width: 1000px"></div>
	<script>
		var chart = Highcharts
				.chart(
						'container',
						{
							chart : {
								zoomType : 'xy'
							},
							credits : {
								enabled : false
							},
							title : {
								text : ''
							},
							exporting : {
								sourceWidth : 1280,
								sourceHeight : 720,
								scale : 1
							},
							legend : {
								enabled : true,
								itemDistance: 50,
								itemStyle : {
									fontSize : '13px'
								}
							},
							xAxis : {
								categories : [ 'N1', 'N2', 'N3' ],
								title : {
									text : '',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "16px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "16px",
										"fontFamily" : "Time New Roman"
									}
								}
							},
							yAxis : [ { // Primary yAxis
								title : {
									text : 'Average Cmax',
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "16px",
										"fontFamily" : "Time New Roman"
									}
								},
								labels : {
									style : {
										"color" : 'black',
										"cursor" : "default",
										"fontSize" : "16px",
										"fontFamily" : "Time New Roman"
									}
								}
							} ],
							tooltip : {
								shared : true
							},
							plotOptions : {
								errorbar : {
									stemWidth : 3
								}
							},
							series : [
									{
										id : 'DDDQNPR',
										name : 'DDDQNPR',
										type : 'column',
										//color : 'rgb(60,178,239)',
										data : [ 3333.220732, 3328.633333,
												3373.05359 ],
										tooltip : {
											pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
										}
									},
									{
										name : 'DDDQNPR误差',
										type : 'errorbar',
										color : 'red',
										data : [ [ 3230.891211, 3486.817072 ],
												[ 3128.698263, 3550.162818 ],
												[ 3074.452855, 3577.110567 ] ],
										tooltip : {
											pointFormat : '(误差范围: {point.low}-{point.high} mm)<br/>'
										}
									},
									{
										id : 'GA_PRIORITY_CODE',
										//color : 'rgb(255,174,139)',
										name : 'GA_PRIORITY_CODE',
										type : 'column',
										data : [ 3687.235492, 3789.931363,
												3819.561235 ],
										tooltip : {
											pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
										}
									},

									{
										name : 'GA_PRIORITY_CODE误差',
										color : 'red',
										type : 'errorbar',
										data : [ [ 3593.698246, 3795.736717 ],
												[ 3541.825497, 3940.191323 ],
												[ 3527.583498, 3994.725754 ] ],
										tooltip : {
											pointFormat : '(误差范围: {point.low}-{point.high} mm)<br/>'
										}
									},
									{
										id : 'GA_RULE_CODE',
										//color : 'rgb(255,174,139)',
										name : 'GA_RULE_CODE',
										type : 'column',
										data : [ 3690.773166, 3758.344769,
												3940.191323 ],
										tooltip : {
											pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
										}
									},

									{
										name : 'GA_RULE_CODE误差',
										color : 'red',
										type : 'errorbar',
										data : [ [ 3624.517231, 3895.736717 ],
												[ 3580.095445, 3940.191323 ],
												[ 3524.857318, 4151.312121 ] ],
										tooltip : {
											pointFormat : '(误差范围: {point.low}-{point.high} mm)<br/>'
										}
									},
									{
										id : 'Best rule',
										//color : 'rgb(255,174,139)',
										name : 'Best rule',
										type : 'column',
										data : [ 4514.528952, 4509.33128,
												4518.553036 ],
										tooltip : {
											pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
										}
									},

									{
										name : 'Best rule误差',
										color : 'red',
										type : 'errorbar',
										data : [ [ 4250.306726, 4787.166898 ],
												[ 4224.135938, 4812.584939 ],
												[ 3986.370668, 4911.974998 ] ],
										tooltip : {
											pointFormat : '(误差范围: {point.low}-{point.high} mm)<br/>'
										}
									} ]
						});
	</script>
</body>
</html>